<template>
  <div class="monitoring">
    <div class="taskInfo">
      <div>
        <div class="boxInfo dbInfo">
          <div>
            <p class="title">任务名称：{{jobdata.jobName}}</p>
            <p>当前同步速度：{{jobdata.jobSpeed}} 条/秒</p>
          </div>

          <div>
            <img src="../../../assets/images/sqlocr.png" />
          </div>
        </div>
      </div>
      <div>
        <div class="boxInfo">
          <!-- <el-row>
            <el-col :span="8">
              <div class="boxChart" id="tbsjlChart"></div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <div class="boxChart" id="tbjlsChart"></div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <div class="boxChart" id="gxjlsChart"></div>
            </el-col>
          </el-row>-->
          <el-row>
            <el-col :span="8">
              <!-- <div class="boxChart" id="tbsjlChart"></div> -->
              <div class="boxImage">
                <img src="../../../assets/images/tongbujilushu.png" />
                <p class="text">
                  <span class="number">{{getCommaFormat(obj_number.dataNum)}}</span>
                  {{obj_number.dataNumUnit||"万条"}}
                </p>
                <p class="title">同步记录数</p>
              </div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <!-- <div class="boxChart" id="tbjlsChart"></div> -->
              <div class="boxImage">
                <img src="../../../assets/images/mubiaoshujuyuanzongtiaoshu.png" />
                <p class="text">
                  <span class="number">{{ getCommaFormat(obj_number.dataSourceNum)}}</span>
                  {{obj_number.dataSourceNumUnit||"万条"}}
                </p>
                <p class="title">目标数据源总条数</p>
              </div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <!-- <div class="boxChart" id="gxjlsChart"></div> -->
              <div class="boxImage">
                <img src="../../../assets/images/mubiaoshujuyuanzongliang.png" />
                <p class="text">
                  <span class="number">{{getCommaFormat(obj_number.dataSourceSize)}}</span>
                  {{obj_number.dataSourceSizeUnit||"万条"}}
                </p>
                <p class="title">目标数据源总量</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <div class="boxInfo">
          <el-row>
            <el-col :span="12">
              <div class="boxChart" id="cpuLoadChart"></div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="12">
              <div class="boxChart" id="realtimesytChart"></div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="taskInfo-mid clearfix" v-show="showdraw">
      <div class="taskInfo-mid-topnav">
        <div class="taskInfo-mid-topnav-left">
          <span>同步数据记录数监控</span>
        </div>
        <div class="taskInfo-mid-topnav-right">
          <el-select v-model="value" size="mini" placeholder="请选择" @change="changelist(value)">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="taskInfo-mid-main">
        <div class="boxChart" id="syncdataChart"></div>
        <!-- <el-divider direction="vertical"></el-divider> -->
      </div>
    </div>
    <div class="taskInfo-mid clearfix" v-show="showdraw">
      <div class="taskInfo-mid-topnav">
        <div class="taskInfo-mid-topnav-left">
          <span>同步数据速率监控</span>
        </div>
        <div class="taskInfo-mid-topnav-right">
          <el-select v-model="value" size="mini" placeholder="请选择" @change="changelist">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="taskInfo-mid-main">
        <div class="boxChart" id="syncdatarateChart"></div>
        <!-- <el-divider direction="vertical"></el-divider> -->
      </div>
    </div>
    <div class="datafromnav" @click="handclckshow">
      数据同步日志
      <i :class="this.showdraw == true?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
    </div>
    <div class="datafrom" v-show="!showdraw">
      <el-form :inline="true" style="margin-left:50px;margin-top:25px" :model="formInline" size="mini" class="demo-form-inline">
        <el-form-item label="源表名称">
          <el-input v-model="reqserdata.tableName"></el-input>
        </el-form-item>
        <el-form-item label="任务起止日期">
          <el-date-picker v-model="reqserdatadate" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" height="500" style="width: 100%; " border>
        <el-table-column prop="writerTables" label="写入表"></el-table-column>
        <el-table-column prop="readerTables" label="读取表"></el-table-column>
        <el-table-column prop="sum" label="数量(条)"></el-table-column>
        <el-table-column prop="rate" label="速率(条/秒)"></el-table-column>
        <el-table-column prop="byteSize" label="文件大小(kb)"></el-table-column>
        <el-table-column prop="date" label="时间"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="reqserdata.pageNo" :page-sizes="[10, 15, 20]" :page-size="reqserdata.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

      <!-- <znxd-list :column="tableData" :page="page" :tableData="tableData" @handlePageChange="handlePageChange(page)" :pagination="true"></znxd-list> -->
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts-liquidfill";
import tbsjlOption from "@/assets/js/chart_datatbsjl";
import tbjlsOption from "@/assets/js/chart_datatbjls";
import gxjlsOption from "@/assets/js/chart_datagxjls";

import cpuLoadOption from "@/assets/js/chart_dataload_cpu";
import Realtimesyt from "@/assets/js/chart_dataRealtimesyt";
import datasyncdata from "@/assets/js/chart_datasyncdata";
// 折线图同步数据速率监控
import datasyncdatarate from "@/assets/js/chart_datasyncdatarate";
import {
  list,
  rigave,
  ratelist,
  averate,
  totalNumber
} from "@/api/task/datamonitoring.js";
import { toCommaFormat } from "@/utils/data.js";

export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "近一周"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        },
        {
          value: "4",
          label: "近三年"
        }
      ],
      // 左上角数据
      jobdata: {
        jobName: "",
        jobSpeed: ""
      },
      value: "1",
      showdraw: true,
      pagedata: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      reqserdata: {
        jobInfoId: "",
        pageNo: 1,
        pageSize: 10,
        startData: "",
        stopData: "",
        tableName: ""
      },
      reqserdatadate: "",
      tableData: [],
      // 列表配置
      formInline: {
        user: "",
        value1: ""
      },
      timer: "",
      obj_number: {
      }
    };
  },
  methods: {
    // 数据同步日志
    handclckshow() {
      this.showdraw = !this.showdraw;
      if (this.showdraw) return;
      let row = this.$route.query;
      this.reqserdata.jobId = row.jobInfoId;
      this.connentSearchlist(this.reqserdata);
    },
    connentSearchlist(obj) {
      list(obj).then(res => {
        let { data } = res;
        if (data.code === "200") {
          this.tableData = data.content;
          this.total = data.total;
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    // 左上角
    // getleftracedata(obj) {
    //   leftaverate(obj).then(res => {
    //     let { data } = res;
    //     if (data.code === "200") {
    //       this.jobdata = data.data;
    //     } else {
    //       this.$message({
    //         message: data.msg,
    //         type: "error"
    //       });
    //     }
    //   });
    // },
    // 仪表盘平均速率
    getaveratedata(obj) {
      rigave(obj).then(res => {
        let { data } = res;
        if (data.code === 200) {
          Realtimesyt.series[0].data[0].value = data.content;
          cpuLoadOption.series[0].data[0].value = data.content;
          this.jobdata.jobSpeed = data.content
          var realtimesytChart = echarts.init(
            document.getElementById("realtimesytChart")
          );
          realtimesytChart.setOption(Realtimesyt);
          realtimesytChart.resize();

          var cpuLoadChart = echarts.init(document.getElementById("cpuLoadChart"));
          cpuLoadChart.setOption(cpuLoadOption);
          cpuLoadChart.resize();
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    getTotalNumber(obj) {
      totalNumber(obj).then(res => {
        let data = res.data;
        this.obj_number = data.content;
      })
    },
    getCommaFormat(val) {
      if (val) { return toCommaFormat(val); }
      return "-";
    },
    // select选择框
    changelist(val) {
      this.getlist();
    },
    // 搜索按钮
    onSubmit() {
      if (this.reqserdatadate) {
        this.reqserdata.startData = this.reqserdatadate[0];
        this.reqserdata.stopData = this.reqserdatadate[1];
      } else {
        this.reqserdata.startData = "";
        this.reqserdata.stopData = ""
      }
      this.connentSearchlist(this.reqserdata);
    },
    // 改变每页数量
    handleSizeChange(val) {
      this.reqserdata.pageSize = val;
      this.connentSearchlist(this.reqserdata);
    },
    // 改变当前页数
    handleCurrentChange(val) {
      this.reqserdata.pageNo = val;
      this.connentSearchlist(this.reqserdata);
    },
    // 同步速率监控
    getdatarate(obj) {
      averate(obj).then(res => {
        let { data } = res;
        if (data.code === 200) {
          datasyncdata.xAxis.data = data.date;
          datasyncdata.series.data = data.data;
          var syncdatarateChart = echarts.init(
            document.getElementById("syncdatarateChart")
          );
          syncdatarateChart.setOption(datasyncdata);
          syncdatarateChart.resize();
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    getlist() {
      let jobInfoId = this.$route.query.jobInfoId;
      this.jobdata.jobName = this.$route.query.jobName
      let obj = {
        jobInfoId: jobInfoId,
        dataId: this.value
      };

      let obj1 = {
        jobInfoId: jobInfoId,
        type: this.$route.query.type
      }

      // 假数据
      // let obj = {
      //   jobInfoId: "1047",
      //   dataId: "1"
      // };
      // this.getleftracedata(obj.jobInfoId);
      this.getdatarate(obj);
      this.getaveratedata(obj);

      let _this = this;
      this.timer = setInterval(() => {
        _this.getaveratedata(obj);
        _this.getTotalNumber(obj1);
      }, 1000);


      // 同步数据监控
      ratelist(obj).then(res => {
        let { data } = res;
        if (data.code === 200) {
          // let xAxisdata = Object.keys(data);
          // let xAxisdata1 = Object.values(data);
          datasyncdatarate.xAxis.data = data.date;
          datasyncdatarate.series.data = data.data;
          // console.log(datasyncdatarate, "syncdataratesyncdataratesyncdatarate");
          var syncdataChart = echarts.init(
            document.getElementById("syncdataChart")
          );
          syncdataChart.setOption(datasyncdatarate);
          syncdataChart.resize();
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    }
  },
  beforeMount() {
    this.getlist();
  },
  mounted() {
    var tbsjlChart = echarts.init(document.getElementById("tbsjlChart"));
    tbsjlChart.setOption(tbsjlOption);
    tbsjlChart.resize();
    var tbjlsChart = echarts.init(document.getElementById("tbjlsChart"));
    tbjlsChart.setOption(tbjlsOption);
    tbjlsChart.resize();
    var gxjlsChart = echarts.init(document.getElementById("gxjlsChart"));
    gxjlsChart.setOption(gxjlsOption);
    gxjlsChart.resize();

    // var cpuLoadChart = echarts.init(document.getElementById("cpuLoadChart"));
    // cpuLoadChart.setOption(cpuLoadOption);
    // cpuLoadChart.resize();

    // var cnLoadChart = echarts.init(document.getElementById("ncLoadChart"));
    // cnLoadChart.setOption(memoryLoadOption);
    // cnLoadChart.resize();

    // var cpLoadChart = echarts.init(document.getElementById("cpLoadChart"));
    // cpLoadChart.setOption(networkLoadOption);
    // cpLoadChart.resize();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  deactivated() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.monitoring {
  display: flex;
  flex-direction: column;
  min-height: 900px;
  min-width: 1600px;
  // > div {
  //   // height: 26.7vh;
  //   // min-height: 260px;
  // }
  > div:nth-child(1) {
    height: 25vh;
    min-height: 250px;
  }
  > div:nth-child(2),
  > div:nth-child(3) {
    height: 24vh;
    min-height: 240px;
  }
  .taskInfo {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    > div:nth-child(1) {
      flex: 3;
      padding-right: 1rem;
    }
    > div:nth-child(2) {
      flex: 5;
      padding-right: 1rem;
    }
    > div:nth-child(3) {
      padding-right: 0;
      flex: 5;
    }
    > div {
      height: 100%;
      .boxInfo {
        height: 100%;
        padding: 1.5rem;
        background-color: #f6f9fb;
        .boxChart {
          width: 100%;
          height: 100%;
        }

        .boxImage {
          width: 100%;
          height: 100%;
          text-align: center;
          > img {
            // width: 144px;
            height: 128px;
          }
          > p {
            line-height: 4vh;
            color: #333333;
            opacity: 0.6;
            font-weight: 400;
            > span {
              opacity: 1;
              font-size: 1.5rem;
            }
          }
          > .title {
            color: #2d8cf0;
            opacity: 1;
          }
        }

        .el-row {
          height: 100%;
          .el-col {
            height: 100%;
            // border: 1px solid green;
            position: relative;
            > .el-divider {
              position: absolute;
              right: -3%;
              top: 8%;
              height: 80%;
              width: 1px;
              opacity: 0.76;
            }
          }
        }
      }
      .dbInfo {
        > div {
          > p {
            line-height: 1.5rem;
            margin: 0.2rem 0;
            color: #999999;
          }
          > p:nth-child(3) {
            margin-bottom: 0;
          }
          .title {
            margin-top: 0;
            font-size: 1rem;
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
  }
  .taskInfo-mid {
    display: flex;
    flex-direction: column;
    .taskInfo-mid-topnav {
      height: 48px;
      line-height: 48px;
      .taskInfo-mid-topnav-left {
        float: left;
        > span {
          padding-left: 14px;
          border-left: 3px solid #128df3;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
        }
      }
      .taskInfo-mid-topnav-right {
        float: right;
        margin-right: 14px;
      }
    }
    .taskInfo-mid-main {
      flex: 1;
      // position: relative;
      .boxChart {
        width: 100%;
        height: 100%;
      }
    }
  }
  .datafromnav {
    height: 42px;
    line-height: 42px;
    text-align: right;
    color: #2d8cf0;
    font-size: 14px;
    width: 100%;
    // background-color: pink;
    padding-right: 10px;
    box-shadow: 1px 0px 3px #888888;
    // margin-right: 10px;
    // border: 1px solid red;
    cursor: pointer;
  }
}
</style>
